<template>
  <transition name="fade" v-on:after-enter="afterEnter">
    <div v-if="show" class="wrap">
      <div class="map-wrap">
        <map-content :map-data="pageInfo.mapdata" :mappath="pageInfo.mappath" :current-id="currentId" @showPopup="showPopup" @hidePopup="hidePopup" ref="MapSq" />
        <div class="map-tit"><img :src="`${publicPath}images/map-tit.png`" alt=""></div>
        <div class="count count-0">{{pageInfo.oldmannum}}人</div>
        <div class="count count-1">{{pageInfo.pnum}}人</div>
        <div :class="['popup',posr]" v-show="popupConfig.show" :style="popupConfig.position" ref="popup">
          <div :class="['popup-wrap']">
            <div class="close" @click="hidePopup"><img :src="`${publicPath}images/btn-close.png`" alt=""></div>
            <div class="con">
              <div class="pic" v-if="popupConfig.pic !== null"><img :src=popupConfig.pic alt=""></div>
              <div class="content">{{popupConfig.brief}}</div>
              <div class="btn">
                <span v-if="parseInt(popupConfig.jump) === 0 && popupConfig.error !== ''" class="nojump">{{popupConfig.error}}</span>
                <span v-else-if="parseInt(popupConfig.jump) === 1" class="jump" @click="next">跳转</span>
              </div>
            </div>
          </div>
          <div class="arr"><img :src="`${publicPath}images/arr.png`" alt=""></div>
        </div>
        <div class="menus">
          <dl>
            <dt @click="showAll">地标图例</dt>
            <dd>
              <ul>
                <li v-for="(item,index) in pageInfo.mapdata.list" :key="index" @click="markerChange(index)">
                  <!--                <div class="ico"><img :src="`${publicPath}images/map-ico${++index}.png`" alt=""></div>-->
                  <div class="ico"><img :src="item.icon" alt=""></div>
                  <div class="txt">{{item.name}}({{item.markernum}})</div>
                </li>
              </ul>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import MapSq from '@/components/MapSq'

export default {
  name: 'Map',
  components: {
    mapContent: MapSq
  },
  data () {
    return {
      publicPath: process.env.BASE_URL,
      pad: false,
      map: null,
      showMap: false,
      popupConfig: {
        show: false,
        jump: '0',
        name: '新嘉街道派出所',
        brief: '新嘉派出所坐落于市区东升路与禾兴路交叉口往东100米，下设刑侦探组、治安警组、社区警组和综合指挥室，社区警组有11个社区警务站',
        jumpId: 15,
        pic: null,
        error: '',
        showdialog: 0,
        position: {}
      },
      posr: '',
      menus: [
        { type: 1, icon: '../assets/images/map-ico1.png', name: '行政机构' },
        { type: 2, icon: '../assets/images/map-ico2.png', name: '老年食堂' },
        { type: 3, icon: '../assets/images/map-ico3.png', name: '警物机头' },
        { type: 4, icon: '../assets/images/map-ico4.png', name: '行政机构' },
        { type: 5, icon: '../assets/images/map-ico5.png', name: '行政机构' }
      ],
      currentId: -1,
      show: false,
      pageInfo: {
        'time': 3000,
        'nextrouter': 'xxxx',
        'prerouter': 'xxx',
        'isandroid': 1,
        'weatherType': '1',
        'weartherContent': '晴转多云',
        'temperature': '26-27',
        'curentType': 1,
        'pnum': 0,
        'oldmannum': 0,
        'name': '社区智慧地图',
        'mapdata': {
          'center': {
            'lat': 120.7428950071,
            'lng': 30.7819672895
          },
          'list': [
            {
              'name': '青少年宫1',
              'lat': 120.7412749529,
              'lng': 30.7824512001,
              'jump': 1,
              'type': 1,
              'dataid': 1,
              'icon': ''
            },
            {
              'name': '青少年宫2',
              'lat': 120.7429164648,
              'lng': 30.7819765068,
              'jump': 1,
              'type': 1,
              'dataid': 1,
              'icon': ''
            },
            {
              'name': '青少年宫',
              'lat': 120.7431364059,
              'lng': 30.7806123268,
              'jump': 0,
              'type': 1,
              'dataid': 1,
              'icon': ''
            },
            {
              'name': '行政机构',
              'lat': 120.7415699959,
              'lng': 30.7811838100,
              'jump': 0,
              'type': 1,
              'dataid': 1,
              'icon': ''
            }
          ]
        }
      }
    }
  },
  methods: {
    async hidePopup () {
      const that = this
      that.popupConfig.show = false
      await that.$store.dispatch('sendPopup', {
        from: 'pad',
        id: that.$route.query.id,
        jumpId: that.popupConfig.jumpId,
        dia: 0
      })
    },
    showPopup (popupObj) {
      const that = this
      that.popupConfig = Object.assign(that.popupConfig, popupObj)
      // console.log('that.popupConfig', that.popupConfig)
      that.posr = popupObj.posr
      // const popupHeight = that.$refs.popup.offsetHeight
      // console.log(popupHeight, that.popupConfig.position)
    },
    afterEnter () {
      // console.log('entered')
      // const that = this
      // console.log('that.map', that.map)
    },
    async getPageInfo () {
      const that = this
      const params = {
        id: that.$route.query.id,
        'from': that.$route.query.deviceType,
        curRouter: 'map'
      }
      await that.$store.dispatch('getMap', params)
      that.pageInfo = that.$store.state.pagemap
      that.show = true
    },
    markerChange (id) {
      const that = this
      that.currentId = id
      that.$refs.MapSq.markerChange(id)
      that.hidePopup()
    },
    showAll () {
      const that = this
      that.$refs.MapSq.markerChange(-1)
      that.hidePopup()
    },
    next () {
      const that = this
      let curRouter = that.$store.state.curRouter
      const autoSlide = that.$store.state.autoslide
      let curRouterIndex = 0
      // console.log('autoSlide.router', autoSlide.router)
      autoSlide.router.map((arr, index) => {
        if (arr.path === curRouter) {
          curRouterIndex = index
        }
      })
      let nextRouterIndex = curRouterIndex + 1 < autoSlide.router.length ? curRouterIndex + 1 : 0
      const id = this.$route.query.id || ''
      const jumpParams = {
        path: autoSlide.router[nextRouterIndex].path,
        query: Object.assign({
          id,
          from: this.pad ? 'pad' : 'tv',
          curRouter: autoSlide.router[nextRouterIndex].path
        }, autoSlide.router[nextRouterIndex].query)
      }
      // this.$router.push(jumpParams)
      this.$emit('next', jumpParams)
      this.$store.dispatch('sendData', jumpParams)
    }
  },
  watch: {
    pad: {
      handler: function (newVal, oldVal) {
        // console.log('ddddddddddd', newVal, oldVal)
      },
      deep: true
    }
  },
  mounted () {
    const that = this
    /**
     * deviceType
     * pad 显示按钮控制
     * tv 不显示按钮控制
     */
    const deviceType = that.$route.query.deviceType
    that.pad = deviceType === 'pad'
    if (that.pad) {
      that.getPageInfo()
    } else {
      that.mapPageTimer = setInterval(() => {
        that.getPageInfo()
      }, that.pageInfo.time)
    }
  }
}
</script>
<style lang="scss" scoped>
  .wrap {
    background: url('../assets/images/main-bg.jpg') no-repeat center center;
  }
  .map-wrap {
    $h: $sz-h;
    $s: 10px;
    height: $h;
    width: $sz-w;
    margin-left: -$sz-w / 2;
    top: 0;
    .map-tit {
      position: absolute;
      $w-tit: 483px;
      $h-tit: 71px;
      width: $w-tit;
      height: $h-tit;
      top: 46px;
      left: 50%;
      margin-left: -$w-tit/2;
      z-index: 1000;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .menus {
      $h-menu: 906px;
      width: 290px;
      height: $h-menu;
      background-color: rgba(0, 0, 0, .3);
      position: absolute;
      bottom: 55px;
      right: 36px;
      dl {
        padding: $s;
        dt {
          $h: 80px;
          text-align: center;
          position: relative;
          font-size: $fz7;
          font-weight: bold;
          height: $h;
          line-height: $h;
          @include textShadow();
          cursor: pointer;
          &:after {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            width: 100%;
            @include boxShadow();
            background-color: $c1;
            opacity: .7;
          }
        }
        dd {
          ul {
            padding-top: 46px;
            li {
              cursor: pointer;
              @include clearfix();
              margin-bottom: 20px;
              margin-left: 15px;
              .ico, .txt {
                @include fl();
              }
              $sz: 52px;
              line-height: $sz;
              .ico {
                width: $sz;
                height: $sz;
                -webkit-border-radius: $sz/2;
                -moz-border-radius: $sz/2;
                border-radius: $sz/2;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .txt {
                font-size: $fz4;
                font-weight: bold;
                padding-left: 15px;
                @include textShadow();
              }
            }
          }
        }
      }
    }
    .count {
      position: absolute;
      top: 63px;
      padding-left: 180px;
      height: 40px;
      line-height: 40px;
      font-size: 30px;
      color: #007df0;
      font-weight: bold;
      text-shadow: -1px -1px 0 #fff,
      1px -1px 0 #fff,
      -1px 1px 0 #fff,
      1px 1px 0 #fff,
      -2px -2px 0 #fff,
      2px -2px 0 #fff,
      -2px 2px 0 #fff,
      2px 2px 0 #fff,
      -3px -3px 0 #fff,
      3px -3px 0 #fff,
      -3px 3px 0 #fff,
      3px 3px 0 #fff,
      -4px -4px 0 #fff,
      4px -4px 0 #fff,
      -4px 4px 0 #fff,
      4px 4px 0 #fff;
      &-0 {
        right: 133px;
        background: url('../../public/images/map-ico-num.png') no-repeat top left;
      }
      &-1 {
        left: 79px;
        background: url('../../public/images/txt.png') no-repeat top left;
      }
    }
    .popup {
      $sz: 28px;
      z-index: 10000;
      position: absolute;
      width: 1px;
      height: 1px;
      left: 300px;
      top: 400px;
      .popup-wrap {
        position: absolute;
        width: 227px;
        padding: 20px;
        border: 4px solid #007df0;
        background-color: rgba(255, 255, 255, .86);
        left: 45px;
        bottom: 63px;
        .close {
          width: $sz;
          height: $sz;
          position: absolute;
          top: -$sz/2;
          right: -$sz/2;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .con {
          .pic {
            img {
              width: 100%;
            }
          }
          .content {
            padding-top: 8px;
            text-indent: 2em;
            font-size: 14px;
            color: #131313;
            line-height: 1.5;
          }
          .btn {
            text-align: center;
            padding: 10px 0;
            span {
              height: 38px;
              line-height: 38px;
              padding: 0 20px;
              display: inline-block;
              margin: 0 auto;
              &.nojump {
                color: $c3;
                font-size: 18px;
              }
              &.jump {
                background-color: #007df0;
                color: $c1;
                cursor: pointer;
              }
            }
          }
        }
      }
      .arr {
        $w: 319px;
        $h: 55px;
        width: $w;
        height: $h;
        position: absolute;
        left: 0;
        bottom: 0;
      }
      &-l {
        .arr {
          -moz-transform: scaleX(-1);
          -webkit-transform: scaleX(-1);
          -o-transform: scaleX(-1);
          transform: scaleX(-1);
          left: auto;
          right: 0;
        }
        .popup-wrap {
          left: auto;
          right: 45px;
        }
      }
      &-b {
        .arr {
          bottom: auto;
          top: 30px;
          -moz-transform: scaleY(-1);
          -webkit-transform: scaleY(-1);
          -o-transform: scaleY(-1);
          transform: scaleY(-1);
          /*IE*/
        }
        .popup-wrap {
          bottom: auto;
          top: 93px;
          .close {
            top: auto;
            bottom: -$sz/2;
            right: -$sz/2;
          }
        }
      }
      &-lb {
        .arr {
          transform: rotate(180deg);
          bottom: auto;
          top: 30px;
          left: auto;
          right: 0;
        }
        .popup-wrap {
          bottom: auto;
          top: 93px;
          left: auto;
          right:45px;
          .close {
            top: auto;
            bottom: -$sz/2;
            right: -$sz/2;
          }
        }
      }
    }
  }

</style>
